<template>
    <div class="adjust_from">
        <!-- dialog -->
        <el-dialog title="新建分组" :visible.sync="dialogVisible" :width="groupDialogWidth" :destroy-on-close="true"
            :close-on-click-modal="false" :close-on-press-escape="false" v-dialogDrag>
            <dialogCom @closeDialog="closeDialog" :groupObject="groupObject" v-on="$listeners" v-bind="$attrs"
                @changeGroupList="changeGroupList" />
        </el-dialog>
        <!-- 分组 -->
        <div class="main_title">
            编辑分组
            <el-tooltip class="item" effect="dark" content="分组调整" placement="top">
                <i class="el-icon-edit edit_button" @click="openDialog"></i>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="下载分组文件" placement="top">
                <i class="el-icon-bottom edit_button"></i>
            </el-tooltip> -->
            <!-- <el-tooltip class="item" effect="dark" content="撤销修改" placement="top">
                <i class="el-icon-refresh-right edit_button" @click="cancel"></i>
            </el-tooltip> -->
        </div>

        <div class="group_items_div">
            <template v-for="(item, index) in dataList">
                <el-popover placement="bottom" trigger="hover" width="195" popper-class="my_popover_style">
                    <div class="group_childrens">
                        <template v-for="(i, y) in item.content">
                            <el-tooltip placement="top">
                                <div slot="content">{{ i.title }}</div>
                                <div class="group_children" 
                                    :class="{ 'is_active': i.ischecked }" @click="changeChildStatus(i, item)">{{ i.title }}
                                </div>
                            </el-tooltip>
                        </template>
                    </div>

                    <div class="items" :class="{ 'is_active': item.ischecked }" @click="changeStatusItem(item)"
                        slot="reference">{{ item.groupTitle }}
                    </div>
                </el-popover>
            </template>
        </div>


    </div>
</template>

<script>
import { deepClone } from '@/utils';
import dialogCom from './components/dialogCom'
export default {
    name: 'GenecloudUiChartAdjust',
    components: {
        dialogCom
    },
    props: {
        group: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {
            //分组信息
            dataList: [],
            dialogVisible: false,
            groupDialogWidth: '900px',
            groupObject: {},
            judgment: null,
        };
    },
    watch: {
        group: {
            handler(val, newVal) {
                if (val) {
                    this.dataList = deepClone(val.dataGroupList)
                    this.groupObject = deepClone(val)
                }
            },
            immediate: true,
        },
    },
    created() {
        let type = this.$attrs.option.legendConfig.reduce((pre, item, index) => {
            item.config.forEach(i => {
                pre.push(i.type)
            })
            return pre
        }, [])
        if (type.includes('mutualExclusion')) {
            this.judgment = true
        } else {
            this.judgment = false
        }
    },
    mounted() {

    },

    methods: {
        openDialog() {
            this.dialogVisible = true
        },
        //取消
        closeDialog(value) {
            this.dialogVisible = value
        },
        //改变分组状态
        changeStatusItem(value) {
            console.log('触发');
            if (value.ischecked) {
                let num = 0
                this.dataList.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (this.judgment) {
                    if (num < 3) return this.$message.error('至少需要存在2个分组！')
                } else {
                    if (num < 2) return this.$message.error('至少需要存在1个分组！')
                }
            }
            value.ischecked = !value.ischecked
            if (!value.ischecked) {
                value.content.map(item => {
                    item.ischecked = false
                })
            } else {
                value.content.map(item => {
                    item.ischecked = true
                })
            }
            this.$emit('changeStatus', this.dataList)
        },
        //改变分组子级状态
        changeChildStatus(i, list) {
            if (i.ischecked) {
                let num = 0
                list.content.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 3) return this.$message.error('每种分组至少需要存在2个样本！')
            }
            i.ischecked = !i.ischecked
            const flag = list.content.every(item => !item.ischecked)
            if (flag) {
                list.ischecked = false
            } else {
                list.ischecked = true
            }
            this.$emit('changeStatus', this.dataList)
        },
        changeGroupList({ dataGroupList, sampleList }) {
            this.dialogVisible = false
            this.dataList = dataGroupList
            this.groupObject.dataGroupList = dataGroupList
            this.groupObject.sampleList = sampleList
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.themeTopToolbgColor {
    background-color: $themeTopToolColor;
    border: 0;
    color: #fff;
    width: 90px;
    height: 38px;
    border-radius: 19px;
}

.adjust_from {
    padding: 20px 0;

    ::v-deep .el-input__inner {
        height: 35px;
        border-radius: 6px;
    }

    .top_item {
        ::v-deep .el-input__inner {
            border-radius: 0 6px 6px 0;
        }
    }

    ::v-deep .el-button--mini {
        padding: 9px;
        margin-left: 10px;
    }

    ::v-deep .el-select-dropdown__item {
        .select_i {
            &:hover {
                color: red !important;
            }
        }

    }

    ::v-deep .el-dialog__header {
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
    }

    ::v-deep .el-input-group__prepend {
        padding: 0 8px;
    }

    ::v-deep .el-radio {
        margin-right: 5px;
    }

    .group_items_div {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 25px 0 25px 30px;
        width: 100%;
        // height: 200px;
        // overflow-y: auto;

        .items {
            width: 74px;
            height: 30px;
            text-align: center;
            line-height: 26px;
            margin: 0 10px 10px 0;
            background-color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #ccc;
            color: #666;
            border-radius: 3px;
            cursor: pointer;

            &.is_active {
                border: 2px solid $themeTopToolColor;
            }
        }
    }
}

.my_popover_style {
    .group_childrens {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 260px;
        margin: 0 auto;
        max-height: 300px;
        overflow-y: auto;
        background-color: #fff;
        .group_children {
            width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            margin: 0 8px 8px 0;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border: 1px solid #ccc;
            cursor: pointer;

            // &:nth-child(3n) {
            //     margin: 0;
            // }

            &.is_active {
                border: 1px solid $themeTopToolColor;
            }
        }
    }
}

.main_title {
    font-size: 14px;
    color: #333;
    font-weight: 700;
}

.edit_button {
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;

    &:hover {
        background-color: #ccc;
        border-radius: 50%;
    }
}
</style>